<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
		  <el-breadcrumb-item>添加商品</el-breadcrumb-item>
		</el-breadcrumb>
		
		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 提示区域 -->
			 <el-alert
				title="添加商品信息" type="info" show-icon center :closable="false">
			 </el-alert>
			
			<!-- 进度条区域 -->
			<el-steps :space="200" :active="activeIndex - 0" finish-status="success"
			align-center>
			  <el-step title="基本信息"></el-step>
			  <el-step title="商品参数"></el-step>
			  <el-step title="商品属性"></el-step>
			  <el-step title="商品图片"></el-step>
			  <el-step title="商品内容"></el-step>
			  <el-step title="完成"></el-step>
			</el-steps>
			
			<!-- 表单 -->
			<el-form 
				:model="addForm" :rules="addFormRules" ref="addFormRef" 
				label-width="100px" label-position="top">
				
				<!-- tab栏 区域 -->
				<el-tabs 
					v-model="activeIndex" :tab-position="'left'"
					:before-leave="beforeTabLeave"
					@tab-click="tabClicked">
					
					<!-- 基本信息 面板 -->
					<el-tab-pane label="基本信息" name="0">
						<el-form-item label="商品名称" prop="goods_name">
							<el-input v-model="addForm.goods_name"></el-input>
						</el-form-item>
						<el-form-item label="商品价格" prop="goods_price">
							<el-input v-model="addForm.goods_price"
							type="number"></el-input>
						</el-form-item>
						<el-form-item label="商品重量" prop="goods_weight">
							<el-input v-model="addForm.goods_weight"
							type="number"></el-input>
						</el-form-item>
						<el-form-item label="商品数量" prop="goods_number">
							<el-input v-model="addForm.goods_number"
							type="number"></el-input>
						</el-form-item>
						<!-- 级联选择框 -->
						<el-form-item label="商品分类" prop="goods_cat">
							<el-cascader
							    v-model="addForm.goods_cat" 
								:options="catelist"
							    :props="cateProps"
							    @change="handleChange"></el-cascader>
						</el-form-item>
					</el-tab-pane>
					
					<!-- 商品参数 面板 -->
					<el-tab-pane label="商品参数" name="1">
						
						<!-- 表单项 -->
						<el-form-item
						  v-for="item in manyTableData" :label="item.attr_name"
						  :key="item.attr_id">
						  
						  <!-- 复选框组 -->
						  <el-checkbox-group v-model="item.attr_vals">
						      <el-checkbox
							    v-for="(cb, i) in item.attr_vals" 
								:key="i" :label="cb" border></el-checkbox>
						  </el-checkbox-group>
						</el-form-item>
					</el-tab-pane>
					
					<!-- 商品属性 面板 -->
					<el-tab-pane label="商品属性" name="2">
					  <el-form-item :label="item.attr_name" v-for="item in onlyTableData"
					  :key="item.attr_id">
					    <el-input  v-model="item.attr_vals"></el-input>  
					  </el-form-item>
					</el-tab-pane>
					
					<!-- 商品图片 面板 -->
					<el-tab-pane label="商品图片" name="3">
					  <el-upload
					    :action="uploadURL"
					    :on-preview="handlePreview"
					    :on-remove="handleRemove"
					    list-type="picture"
						:headers="headersObj"
						:on-success="handleSuccess">
					    <el-button size="small" type="primary">点击上传</el-button>
					  </el-upload>	
					</el-tab-pane>
					
					<!-- 商品内容 面板 -->
					<el-tab-pane label="商品内容" name="4">
						<!-- 富文本编辑器组件 -->
						<quill-editor v-model="addForm.goods_introduce"/>
						 
						<!-- 添加商品 按钮 -->
						<el-button type="primary" class="btnAdd"
						@click="add">添加商品</el-button>
					</el-tab-pane>
				</el-tabs>
			</el-form>
			
		</el-card>
		
		<!-- 图片预览 对话框 -->
		<el-dialog
		  title="图片预览"
		  :visible.sync="previewVisible"
		  width="50%">
		  <img :src="previewPath" alt="" class="previewImg">
		</el-dialog>
		
	</div>
</template>

<script>
	import _ from 'lodash'
	
	export default {
		name: 'Add',
		data(){
			return {
				activeIndex: '0',  //激活项的索引
				addForm: {  //表单对象
					goods_name: '',
					goods_price: 0,
					goods_weight: 0,
					goods_number: 0,
					goods_cat: []  ,//商品所属的分类数组
					pics: [],  // 图片数组
					goods_introduce: '',  //商品内容
					attrs: []
				},  
				addFormRules: {  //表单的验证规则对象
					goods_name: [
						{ required: true, message: '请输入商品名称', trigger: 'blur' }
					],
					goods_price: [
						{ required: true, message: '请输入商品价格', trigger: 'blur' }
					],
					goods_weight: [
						{ required: true, message: '请输入商品重量', trigger: 'blur' }
					],
					goods_number: [
						{ required: true, message: '请输入商品数量', trigger: 'blur' }
					],
					goods_cat: [
						{ required: true, message: '请选择商品分类', trigger: 'blur' }
					]
				},
				catelist: [],  //所有商品分类数据
				cateProps: {  //级联选择器配置对象
					expandTrigger: 'hover',
					label: 'cat_name',
					value: 'cat_id',
					children: 'children'
				},
				manyTableData: [],  //动态参数
				onlyTableData: [],  //静态属性
				uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload',  //图片上传的后台API地址
				headersObj: {  //图片上传时的请求头
					Authorization: window.sessionStorage.getItem('token')
				},
				previewPath: '',  //保存预览的上传图片的路径
				previewVisible: false,  //图片预览对话框的显示标识
				
			}
		},
		computed: {
			//返回级联选择框中选中的三级分类的id值
			cateId(){
				if(this.addForm.goods_cat.length === 3){
					return this.addForm.goods_cat[2]
				}
				return null
			},
			
		},
		created() {
			//获取所有商品分类数据
			this.getCateList()
			
		},
		methods: {
			//获取所有商品分类数据
			async getCateList(){
				const {data: res} = await this.$http.get('categories')
				if(res.meta.status !== 200){
					return this.$message.error('获取商品数据失败！')
				}
				this.catelist = res.data
				//console.log(this.catelist)
			},
			//级联选择器选中项变化时会触发这个函数
			handleChange(){
				//console.log(this.addForm.goods_cat)
				
				//限制只能选中三级分类
				if(this.addForm.goods_cat.length !== 3){
					this.addForm.goods_cat = []
				}
				
			},
			//标签页切换前会触发该回调函数
			beforeTabLeave(activeName, oldActiveName){
				//console.log(activeName, oldActiveName)
				
				//如果为选择三节商品分类，则不允许切换面板
				if(oldActiveName === '0' && this.addForm.goods_cat.length !== 3){
					this.$message.error('请先选择商品分类！')
					return false
				}
			},
			//标签页选项被选中时 会触发该回调函数
			async tabClicked(){
				//console.log(this.activeIndex)
				
				//如果成功切换到商品参数面板，则发起网络请求，获取商品的动态参数数据
				if(this.activeIndex === '1'){
					//console.log(this.cateId)
					
					const {data: res} = await this.$http.get(`categories/
					${this.cateId}/attributes`, {params: {sel: 'many'}})
					
					if(res.meta.status !== 200){
						return this.$message.error('获取动态参数列表失败！')
					}
					
					//console.log(res.data)
					res.data.forEach(item => {
						item.attr_vals= item.attr_vals.length === 0 ? [] :
						item.attr_vals.split(' ')
					})
					
					this.manyTableData = res.data
					//console.log(this.manyTableData)
				}else if(this.activeIndex === '2'){ 
					//如果成功切换到商品属性面板，则发起网络请求，获取商品的静态属性数据
					//console.log(this.cateId)
					
					const {data: res} = await this.$http.get(`categories/
					${this.cateId}/attributes`, {params: {sel: 'only'}})
					
					if(res.meta.status !== 200){
						return this.$message.error('获取静态属性列表失败！')
					}
					
					this.onlyTableData = res.data
					//console.log(this.onlyTableData)
				}
				
			},
			//处理图片预览效果
			handlePreview(file){
				//console.log(file)
				
				//将要预览的图片的地址保存到data中
				this.previewPath = file.response.data.url
				
				this.previewVisible = true
			},
			//处理移除图片操作
			handleRemove(file){
				//console.log(file)
				
				// 1．获取将要删除的图片的临时路径
				const tempPath = file.response.data.tmp_path
				// 2．从pics数组中，找到这个图片对应的索引值
				const i = this.addForm.pics.findIndex( x => x.pic === tempPath)
				// 3．调用数组的splice方法，把图片信息对象，从 pics数组中移除
				this.addForm.pics.splice(i, 1)
				console.log(this.addForm.pics)
			},
			//上传组件 图片上传成功后的 回调函数
			handleSuccess(response){
				//console.log(response)
				
				//1．拼接得到一个图片信息对象
				const picInfo = { pic: response.data.tmp_path}
				
				//2．将图片信息对象，push到pics数组中
				this.addForm.pics.push(picInfo)
				
				//console.log(this.addForm.pics)
			},
			//商品内容 添加商品按钮 click事件 的回调函数
			add(){
				//console.log(this.addForm.goods_introduce)
				
				this.$refs.addFormRef.validate(async valid => {
					//表单验证未通过时，提示错误信息
					if(!valid){
						return this.$message.error('请填写必要的表单项！')
					}
					
					//表单验证通过时，发生请求
					//深拷贝
					const form = _.cloneDeep(this.addForm)
					//goods_cat数组转换为字符串
					form.goods_cat = form.goods_cat.join(',')
					//console.log(form)
					
					//处理动态参数
					this.manyTableData.forEach(item =>{
						const newInfo = {
							attr_id: item.attr_id,
							attr_value: item.attr_vals.join(' ')
						}
						this.addForm.attrs.push(newInfo)
					})
					//处理静态属性
					this.onlyTableData.forEach(item =>{
						const newInfo = {
							attr_id: item.attr_id,
							attr_value: item.attr_vals
						}
						this.addForm.attrs.push(newInfo)
					})
					
					form.attrs = this.addForm.attrs
					//console.log(form)
					
					//发起网络请求，提交数据
					const {data: res} = await this.$http.post('goods', form)
					
					if(res.meta.status !== 201){
						return this.$message.error('添加商品失败！')
					}
					
					this.$message.success('添加商品成功')
					
					this.$router.push('/goods')
				})
			},
			
		}
	}
</script>

<style lang="less" scoped="scoped">
	.el-checkbox {
		margin: 0 10px 0 0 !important;
	}
	.previewImg {
		width: 100%;
	}
	.btnAdd {
		margin-top: 15px;
	}
</style>
